<template>
  <div class="app-container">
    <el-button @click="back" type="primary">返回</el-button>
    <el-steps :active="active" align-center>
      <el-step title="待出发" description=""></el-step>
      <el-step title="待服务" description=""></el-step>
      <el-step title="服务中" description=""></el-step>
      <el-step title="结束待确认" description=""></el-step>
      <el-step title="已完成" description=""></el-step>
      <el-step title="已取消" description=""></el-step>
      <el-step title="退款" description=""></el-step>
    </el-steps>
    <div style="margin-top: 50px;">
      <el-tabs tab-position="left">
        <el-tab-pane label="流程信息">
          <el-table :data="flowList" fit highlight-current-row>
            <el-table-column label="操作时间" align="center" prop="createTime">
            </el-table-column>
            <el-table-column label="操作身份" align="center" prop="operationId">
            </el-table-column>
            <el-table-column label="操作人" align="center" prop="operator">
            </el-table-column>
            <el-table-column label="操作结果" align="center" prop="operationResult">
            </el-table-column>
            <el-table-column label="备注信息" align="center" prop="remarks">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="就诊人信息">
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 900px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr>
              <td align="right" width="20%">
                服务地址
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.serviceAddress }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                详细地址
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.detailedAddress }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                联系人
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.contactPerson }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                手机号码
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.contactPhone }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                是否就诊人
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.client }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                是否有过敏史
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.isHistoryAllergies }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                是否有常见病或慢性病
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.isChronicDisease }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                就诊人姓名
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.patientName }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                就诊人性别
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.sex }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                就诊人出生日期
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.birthDate }}
              </td>
            </tr>
            <!-- <tr>
              <td align="right" width="20%">
                年龄
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.idNum }}
              </td>
            </tr> -->
            <tr>
              <td align="right" width="20%">
                就诊人身份证
              </td>
              <td align="left" width="80%">
                {{ visitorInfo.idNum }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                就诊人身份证正面照
              </td>
              <td align="left" width="80%">
                <el-image fit="contain" style="width: 100px; height: 100px" :src="visitorInfo.idCardFront"
                  :preview-src-list="[visitorInfo.idCardFront]">
                </el-image>
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                就诊人身份证反面照
              </td>
              <td align="left" width="80%">
                <el-image fit="contain" style="width: 100px; height: 100px" :src="visitorInfo.idCardReverse"
                  :preview-src-list="[visitorInfo.idCardReverse]">
                </el-image>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="服务信息">
          <div>项目信息</div>
          <el-table :data="projectList" fit highlight-current-row>
            <el-table-column label="医院名称" align="center" prop="hospitalName">
            </el-table-column>
            <el-table-column label="项目名称" align="center" prop="serviceItem">
            </el-table-column>
            <el-table-column label="价格" align="center" prop="serviceItemPrice">
            </el-table-column>
            <el-table-column label="服务时间" align="center" prop="serviceTime">
            </el-table-column>
            <el-table-column label="小计" align="center" prop="subtotal">
            </el-table-column>
            <el-table-column label="实付" align="center" prop="actualPayment">
            </el-table-column>
          </el-table>
          <div>订单信息</div>
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 900px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr>
              <td align="right" width="20%">
                订单编号
              </td>
              <td align="left" width="80%">
                {{ serveInfo.orderNum }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                下单人
              </td>
              <td align="left" width="80%">
                {{ serveInfo.contactName }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                诊断证明
              </td>
              <td align="left" width="80%">
                {{ serveInfo.orderNum }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                订单金额
              </td>
              <td align="left" width="80%">
                {{ serveInfo.orderNum }}
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="医院信息">
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 900px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr>
              <td align="right" width="20%">
                医院名称
              </td>
              <td align="left" width="80%">
                {{ hospitalInfo.hospitalAme }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                医院地址
              </td>
              <td align="left" width="80%">
                {{ hospitalInfo.detailAddress }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                图片
              </td>
              <td align="left" width="80%">
                <el-image fit="contain" style="width: 100px; height: 100px" :src="hospitalInfo.fileName"
                  :preview-src-list="[hospitalInfo.fileName]">
                </el-image>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="护士信息">
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 900px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr>
              <td align="right" width="20%">
                护士名称
              </td>
              <td align="left" width="80%">
                {{ nurseInfo.nurseName }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                手机号
              </td>
              <td align="left" width="80%">
                {{ nurseInfo.tel }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                图片
              </td>
              <td align="left" width="80%">
                <el-image fit="contain" style="width: 100px; height: 100px" :src="nurseInfo.pictureName"
                  :preview-src-list="[nurseInfo.pictureName]">
                </el-image>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <!--       <el-tab-pane label="患者自我评估表">
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 600px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr>
              <td align="right" width="20%">
                自理能力
              </td>
              <td align="left" width="80%">
                {{ selfInfo.selfCareAbility }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                近期就诊医院
              </td>
              <td align="left" width="80%">
                {{ selfInfo.recentVisitsHospital }}
              </td>
            </tr>
            <tr>
              <td align="right" width="20%">
                意识状态
              </td>
              <td align="left" width="80%">
                {{ selfInfo.consciousnessState }}
              </td>
            </tr>
          </table>
        </el-tab-pane> -->
        <!-- <el-tab-pane label="首次评估表">
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 800px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr v-for="item in firstAssessList" :key="item.uid">
              <td align="left" width="50%">
                {{ item.questionName }}
              </td>
              <td align="left" width="50%" v-if="item.questionType !== '多选'">
                {{ item.result }}
              </td>
              <td align="left" width="50%" v-else>
                <span v-for="ele in item.result" :key="ele">{{ ele }}</span>
              </td>
            </tr>
          </table>
        </el-tab-pane> -->
        <el-tab-pane label="入户评估表">
          <table border="1" cellspacing="0" cellpadding="6"
            style="width: 800px; border-color:#eee;color: #000;font-size: 12px;margin: 20px 10px;">
            <tr v-for="item in assessInfo" :key="item.uid">
              <td align="left" width="50%">
                {{ item.questionName }}
              </td>
              <td align="left" width="50%" v-if="item.questionType !== '多选'">
                {{ item.questionAnswer }}
              </td>
              <td align="left" width="50%" v-else>
                <span v-for="ele in item.questionAnswer" :key="ele">{{ ele }}</span>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <!-- <el-tab-pane label="总结">总结</el-tab-pane> -->
        <el-tab-pane label="患者评价">
          <el-descriptions title="患者评价" :column="1" border labelStyle="width:200px;">
            <el-descriptions-item label="综合服务">{{patientEvaluationInfo.comprehensiveServices}}</el-descriptions-item>
            <el-descriptions-item label="服务态度">{{patientEvaluationInfo.servicesAttitude}}</el-descriptions-item>
            <el-descriptions-item label="服务质量">{{patientEvaluationInfo.servicesQuality}}</el-descriptions-item>
            <el-descriptions-item label="系统使用">{{patientEvaluationInfo.sysUse}}</el-descriptions-item>
            <el-descriptions-item label="文字评价">{{patientEvaluationInfo.servicesSummarize}}</el-descriptions-item>
            <el-descriptions-item label="评价时间"></el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <!-- <el-tab-pane label="护士评价">护士评价</el-tab-pane> -->
      </el-tabs>
    </div>

  </div>
</template>

<script>
  import * as orderDetails from '../../api/orderDetails'
  export default {

    data() {
      return {
        list: [],
        orderNum: '',
        uid: '',
        active: 0,
        // 首次评估
        firstAssessList: [],
        flowList: [],
        visitorInfo: {},
        serveInfo: {},
        projectList: [],
        hospitalInfo: {},
        nurseInfo: {},
        assessInfo: {},
        selfInfo: {},
        patientEvaluationInfo: {}
      }
    },
    mounted() {
      this.uid = this.$route.query.uid
      this.orderNum = this.$route.query.orderNum
      this.initStatus()
      this.getEvaluationResult()
      this.getOrderOperate()
      this.getVisitorInfoComm()
      this.getOrderServeInfoComm()
      this.getHospitalInfoComm()
      this.getNurseInfoComm()
      this.orderNurseAssessInfo()
      this.getselfAssessmentComm()
      this.getPatientEvaluation()
    },

    methods: {
      back() {
        this.$router.go(-1)
      },
      initStatus() {
        let status = this.$route.query.status
        let obj = {
          "待出发": 0,
          "待服务": 1,
          "服务中": 2,
          "结束待确认": 3,
          "已完成": 4,
          "已取消": 5,
          "退款": 6
        }
        this.active = obj[status] || 0
      },
      getEvaluationResult() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.evaluationResult(param).then(response => {
          this.firstAssessList = response.data.rows
          this.firstAssessList.map(item => {
            if (item.questionType === '多选') {
              item.result = JSON.parse(item.result)
            }
          })
        }).catch(error => {
          console.log(error)
        })
      },
      getOrderOperate() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.orderOperateRecord(param).then(response => {
          this.flowList = response.data.rows
        }).catch(error => {
          console.log(error)
        })
      },
      getVisitorInfoComm() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.getVisitorInfoComm(param).then(response => {
          this.visitorInfo = response.data
        }).catch(error => {
          console.log(error)
        })
      },
      getOrderServeInfoComm() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.getOrderServeInfoComm(param).then(response => {
          this.serveInfo = response.data.item
          this.projectList = response.data.rows
          console.log(this.projectList)
        }).catch(error => {
          console.log(error)
        })
      },
      getHospitalInfoComm() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.getHospitalInfoComm(param).then(response => {
          this.hospitalInfo = response.data
        }).catch(error => {
          console.log(error)
        })
      },
      getNurseInfoComm() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.getNurseInfoComm(param).then(response => {
          this.nurseInfo = response.data
        }).catch(error => {
          console.log(error)
        })
      },
      orderNurseAssessInfo() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.orderNurseAssessInfo(param).then(response => {
          this.assessInfo = response.data.rows
          console.log(this.assessInfo)
          // this.assessInfo.map(item => {
          //   if (item.questionType === '多选') {
          //     item.questionAnswer = JSON.parse(item.questionAnswer)
          //   }
          // })
        }).catch(error => {
          console.log(error)
        })
      },
      getselfAssessmentComm() {
        let param = {
          orderNum: this.orderNum
        }
        orderDetails.getselfAssessmentComm(param).then(response => {
          this.selfInfo = response.data.data
        }).catch(error => {
          console.log(error)
        })
      },
      getPatientEvaluation() {
        const param = {
          orderNum: this.orderNum
        }
        orderDetails.getPatientEvaluation(param).then(response => {
          this.patientEvaluationInfo = response.data
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

<style scoped lang="scss"></style>
